<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>search</title>
  <link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
  <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<div id="app">
  <div>
    <el-button>aaaa</el-button>
    <div class="search-container">
      <h2>搜索</h2>
      <div class="search-header">
        <el-input
            v-model="searchForm.keyword"
            class="search-container-input"
            placeholder="请输入关键字"
            clearable
            size="medium"
            type="text"
            @keyup.native="enterSearch($event)"
        />
        <el-button>aaaa</el-button>
        <el-button class="search-btn" type="primary" size="medium" icon="el-icon-search" @click="fetchData"/>
      </div>
      <hr>
      <div class="search-result">
        <div v-for="item in data.hits.hits" :key="item._source.id">
          <div class="docs-search-title">
            <a :href="`${item._source.filename}`">{{ item._source.title }}</a>
          </div>
          <div class="docs-search-uri">https://dev.mysql.com/doc/refman/8.0/en/{{ item._source.filename }}
          </div>
          <div class="docs-search-synopsis">{{ item._source.content }}</div>
        </div>
        <el-pagination
            class="pagination"
            background
            :current-page="pageNum"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</div>
</body>
<script>
  new Vue({
    el: '#app',
    data: {
      data: {
        hits: {
          hits: [
            {
              _source: {
                id: 1,
                title: '13.1.9 ALTER TABLE Syntax',
                filename: 'alter-table.html',
                content: 'ALTER TABLE tbl_name [alter_specification [, alter_specification] ...] [partition_options] alter_specification: table_options | ADD [COLUMN] col_name column_definition [FIRST | AFTER col_name] | ADD [COLUMN] (col_name column_definition,...) | ADD ...| ADD [CONSTRAINT [symbol]] UNIQUE [INDEX|KEY] [index_name] [index_type] (key_part,...) [index_option] ...'
              }
            },
            {
              _source: {
                id: 2,
                title: '13.1.9 ALTER TABLE Syntax',
                filename: 'alter-table.html',
                content: 'ALTER TABLE tbl_name [alter_specification [, alter_specification] ...] [partition_options] alter_specification: table_options | ADD [COLUMN] col_name column_definition [FIRST | AFTER col_name] | ADD [COLUMN] (col_name column_definition,...) | ADD ...| ADD [CONSTRAINT [symbol]] UNIQUE [INDEX|KEY] [index_name] [index_type] (key_part,...) [index_option] ...'
              }
            }
          ],
          total: {
            value: 0
          }
        }
      },
      visible: false,
      searchForm: {
        keyword: ''
      },
      pageNum: 1,
      pageSize: 10,
      total: 1
    },
    mounted: function () {
      this.fetchData()
    },
    methods: {
      fetchData: function () {
        const params = this.param2Obj(location.href)
        if (params.keyword) {
          this.searchForm.keyword = params.keyword
        }
        const options = {
          params: {
            keyword: this.searchForm.keyword,
            from: this.pageNum,
            size: this.pageSize
          }
        }
        this.$http.get('/mysql-manual/search', options).then((response) => {
          this.data = response.body
          this.total = response.body.hits.total.value
          this.data.hits.hits.map(value => {
            value._source.content = value._source.content.substring(0, 150)
            value._source.content = value._source.content + '......'
          })
        })
      },
      enterSearch: function (event) {
        if (event.keyCode === 13) {
          this.fetchData(this.pageNum, this.pageSize, this.searchForm)
        }
      },
      handleSizeChange: function (val) {
        this.pageSize = val
        this.fetchData(this.pageNum, val)
      },
      handleCurrentChange: function (val) {
        console.log(val)
        this.pageNum = val
        this.fetchData(val, this.pageSize)
      },
      param2Obj: function (url) {
        const search = url.split('?')[1]
        if (!search) {
          return {}
        }
        return JSON.parse(
          '{"' +
          decodeURIComponent(search)
            .replace(/"/g, '\\"')
            .replace(/&/g, '","')
            .replace(/=/g, '":"') +
          // .replace(/\+/g, ' ') +
          '"}'
        )
      }

    }
  })
</script>
<style>
  .search-container {
    width: 800px;
    margin: 0 auto;
  }

  .search-header {
    height: 50px;
  }

  .search-container .search-container-input {
    float: left;
    width: 40%;
  }

  .search-container .search-btn {
    margin-left: 5px;
  }

  .search-container .search-result {
    font-family: Microsoft Yahei, Arial, "Material Icons Extended", stonefont,
    iknow-qb_share_icons, review-iconfont, mui-act-font, fontAwesome,
    tm-detail-font, office365icons, MWF-MDL2, global-iconfont, "Bowtie", myfont,
    sans-serif !important;
    text-align: left;
    margin-top: 5px;
  }

  .search-container .search-result a:visited {
    color: #0074a3;
  }

  .search-container .search-result a:link {
    color: #0074a3;
  }

  .search-container .search-result a:hover {
    text-decoration: underline;
  }

  .search-container .search-result a {
    background: transparent;
    text-decoration: none;
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    cursor: pointer;
  }

  .search-container .search-result .docs-search-uri {
    font-size: 85%;
    color: #666;
  }

  .search-container .search-result .docs-search-synopsis {
    font-size: 90%;
    padding-bottom: 20px;
    color: #333;
  }

</style>
</html>
